<template>
	<div class="mt-3 d-flex flex-wrap align-items-start">
		<a href="./film.html" class="text-decoration-none" v-for="film in filmlisthot" :key="film.film_id">
			<div class="film p-2 m-2 rounded shadow shadow-hover-blue hand"><img :src="require('@/assets/img/' + film.film_cover_image)"
					class="w-100">
				<div class="mt-2 d-flex justify-between align-items-end">
					<div class="text-sm text-gray ellipsis">{{film.film_name}}</div>
					<div class="text-biger text-red text-bold">{{film.film_rank}}</div>
				</div>
				<div class="mt-1 text-xs text-muted ellipsis">{{film.film_title}}</div>
				<div class="mt-1 d-flex justify-between text-xs text-muted">
					<div class="d-flex">
						<div class="mr-1" v-for="category in film.category_list">
							{{category.category_name}}
						</div>
					</div>
					<div>{{film.film_duration}}m</div>
				</div>
				<div class="mt-1 d-flex justify-between text-muted text-xs">
					<div>2021-02-12</div>
					<div class="d-flex">
						<div class="ml-1" v-for="country in film.country_list">{{country.country_name}}
						</div>
					</div>
				</div>
				<div class="mt-1 text-muted text-xs d-flex flex-wrap">
					<div class="mr-2" v-for="director in film.director_list">{{director.director_name}}
					</div>
				</div>
			</div>
		</a>
	</div>
</template>

<script>
	import axios from 'axios';
	export default {
		name: "Film",
		data() {
			return {
				filmlisthot: []
			}
		},
		mounted() {
			this.getFilmListHot();
		},
		methods: {
			async getFilmListHot() {
				let {
					data: res
				} = await axios.get('/getFilmList');
				this.filmlisthot = res.slice(0, 8);
			}
		}
	}
</script>

<style scoped>
	@import '../assets/css/film.component.css';
	@import '../assets/css/film_ranking.component.css';
	@import '../assets/css/global.css';
	@import '../assets/css/index.css';
</style>
